<template>
	<view v-if="editable">
		<view class="item-box">
			<view class="item-header">
				<image :src="`${state.baseImgUrl}/renzheng.png`" class="item-header-img"></image>
				<text>可体验鉴定、交易权限</text>
			</view>
			<view class="item-body">
				<view class="item-body-lf">
					<image v-if="userInfo" :src="userInfo.avatarUrl" class="item-body-img"></image>
					<image v-else :src="`${state.baseImgUrl}/pic1.png`" class="item-body-img"></image>
					<view style="margin-left: 10rpx;">
						<view v-if="userInfo">{{ userInfo.nickName }}</view>
						<view v-else>微信用户</view>
						<text v-if="userInfo" class="item-body-info">已验证登录信息</text>
						<view v-else class="item-body-info">验证登录身份信息</view>
					</view>
				</view>
				<view class="item-body-rt" :class="{ active: !userInfo }">
					<text v-if="userInfo">已登录</text>
					<text v-else @tap="goLogin" class="img-body-action">去登录</text>
				</view>
			</view>
		</view>
		<view class="item-box">
			<view class="item-header">
				<image :src="`${state.baseImgUrl}/renzheng2.png`" class="item-header-img"></image>
				<text>实名后可以享受更多权限</text>
			</view>
			<view class="item-body">
				<view class="item-body-lf">
					<image :src="`${state.baseImgUrl}/pic2.png`" class="item-body-img"></image>
					<view style="margin-left: 10rpx;">
						<view>实名认证</view>
						<text class="item-body-info">验证身份证实名信息</text>
					</view>
				</view>
				<view class="item-body-rt" :class="{ active: !userInfo || (userInfo && userInfo.certificateStatus !== 1) }">
					<text v-if="userInfo && userInfo.certificateStatus === 1">已认证</text>
					<text v-else @tap="goAuth" class="img-body-action">去认证</text>
				</view>
			</view>
		</view>
	</view>
	<view v-else>
		<view class="item-box">
			<view class="item-header">
				<image :src="`${state.baseImgUrl}/pic3.png`" class="item-header-img"></image>
				<text>已认证核实信息</text>
			</view>
			<view>
				<view class="item-body-row">
					<text class="label">账户名称</text>
					<view class="value"><text>{{formData.name}}</text> <view class="line">|</view> <text @tap="copyTxt()">复制</text></view>
				</view>
				<view class="item-body-row">
					<text class="label">账号</text>
					<view ><text>{{formData.account}}</text> <view class="line">|</view> <text>复制</text></view>
				</view>
				<view class="item-body-row">
					<text class="label">银行</text>
					<view>{{formData.bank}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, inject, reactive } from 'vue'
	import { onLoad, onShow } from "@dcloudio/uni-app"
	import { login, membersinfo } from "@/utils/api"
	import { findAccountByUserId } from '@/api/payAccount'

	const baseimgurl = inject("$baseimgurl");
	const state = reactive({
		baseImgUrl: baseimgurl
	})
	const queryCode = ref()
	const userInfo = ref(null)
	const editable = ref(true)
	const formData = ref({})
	// #ifdef MP-WEIXIN
	onLoad(options => {
		if (options.code) {
			queryCode.value = options.code
		}
	})

	const s_login = (code, bizId) => {
		let params = {
			code: code,
			manageUserId: bizId,
			grant_type: "wx_mini_app",
		}
		login(params).then((res) => {
			uni.setStorageSync('token_type', res.data.token_type)
			uni.setStorageSync('token', res.data.access_token)

			membersinfo().then((meinfo) => {
        uni.setStorageSync("userinfo", JSON.stringify(meinfo.data))
				userInfo.value = meinfo.dat
				if (meinfo.data && meinfo.data.certificateStatus === 1) {
					editable.value = false
					getPayAccount()
				}
      });
		})
	}

	const getPayAccount = () => {
		findAccountByUserId({id: queryCode.value}).then(res => {
			if (res.code === '1') {
				if (res.data && res.data.recycleAccount) {
					formData.value = res.data.recycleAccount
				}
			} else {
				uni.showToast({
					icon: "none",
					title: res.msg,
				})
			}
		})
	}

	const showTip = (msg,time) => {
		uni.showToast({
			icon: 'none',
			title: msg,
			duration: time || 1800
		})
	}

	const copyTxt = value => {
		let v = String(value);
		uni.setClipboardData({
			data: v,
			success: function () {
				showTip('复制成功');
			}
		});
	}

	onShow(() => {
		setTimeout(async() => {
			const d = uni.getStorageSync('userinfo')
			if (d) {
				const data = JSON.parse(d)
				if (data) {
					userInfo.value = data
					if (data && data.certificateStatus === 1) {
						editable.value = false
						getPayAccount()
					}
				} else {
					const res = await wx.login();
					s_login(res.code, queryCode.value)
				}
			}
		}, 1000)
	})

	// 去登录获取手机号
	const goLogin = () => {
		uni.navigateTo({
			url: '/pages/login/index?bizId' + queryCode.value,
		})
	}
	// 去实名认证
	const goAuth = () => {
		uni.navigateTo({
			url: '/pages/me/authentication'
		})
	}
	// #endif
</script>

<style>
	page{
	  background: #F4F4F4 ;
	  padding: 22rpx;
	  box-sizing: border-box;
	}
</style>
<style scoped lang="scss">
	.item-box {
		background-color: #fff;
		margin-top: 22rpx;
	}
	.item-box:first-child {
		margin-top: 0;
	}
	.item-header {
		display: flex;
		align-items: center;
		background-color: #F9F9F9;
	}
	.item-header-img {
		width: 178rpx;
		height: 64rpx;
	}
	.item-header text {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.item-body {
		height: 184rpx;
		background-color: #fff;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item-body-lf {
		display: flex;
	}
	.item-body-img {
		width: 73rpx;
		height: 73rpx;
	}
	.item-body-info {
		font-size: 22rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.item-body-rt {
		width: 100rpx;
		height: 43rpx;
		line-height: 43rpx;
		text-align: center;
	}
	.item-body-rt.active {
		border-radius: 22rpx;
		border: 2rpx solid #953B82;
	}
	.item-body-rt text {
		font-size: 22rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.item-body-rt.active text {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #953B82;
	}
	.item-body-row {
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 25rpx;
		color: #1F2233;
		padding: 0 20rpx;
	}
	.item-body-row .line {
		display: inline-block;
		height: 36rpx;
		color: #E9E9E9;
		margin: 0 10rpx;
	}
	.item-body-row .label {
		color: #737480;
	}
</style>
